<template>
    <div v-cloak>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-date"></i> 系统工具</el-breadcrumb-item>
                <el-breadcrumb-item>数据链接设置</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-row>
                <div>
                    <el-button type="primary" @click="addNew">添加</el-button>
                    <el-button @click="deleteRows" :loading="deleteloading">删除</el-button>
                    <a :href="exportUrl" class="r exportLink"  target="_blank" :style="{background:maincolor || '#409EFF'}">导出</a>
                </div>
            </el-row>
            <el-table
                ref="multipleTable"
                :data="dataLink"
                border
                @selection-change="handleSelectionChange"
                v-loading="loading1"
                style="width: 100%; margin-top:20px">
                <el-table-column
                    type="selection"
                    width="55">
                </el-table-column>
                <el-table-column
                    prop="connectName"
                    label="数据库连接"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="connectTypeName"
                    label="数据库驱动"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="connectIp"
                    label="IP地址">
                </el-table-column>
                <el-table-column
                    prop="port"
                    label="端口">
                </el-table-column>
                <el-table-column
                    prop="serviceId"
                    label="SID">
                </el-table-column>
                <el-table-column
                    label="操作">
                    <template slot-scope="scope">
                        <a @click="modifyRow(scope.row)" class="mr15">修改</a>
                        <a @click="moveUp(scope.row)" class="mr15" v-if="scope.row.index !== 0">上移</a>
                        <a @click="moveDown(scope.row)" v-if="scope.row.end !== true">下移</a>
                    </template>
                </el-table-column>
            </el-table>
            <div class="page_container">
                <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="threadNum"
                    layout="total, prev, pager, next, jumper"
                    :total="totleNum">
                </el-pagination>
            </div>
        </div>
        <div>
            <el-dialog
                :title="dialogTitle"
                :visible.sync="dialogVisible"
                width="40%"
            >
                <el-row class="mt10">
                    <el-col :span="6"><span><span class="red">*</span>数据库链接名称：</span></el-col>
                    <el-col :span="15">
                        <el-input v-model="connectName"></el-input>
                    </el-col>
                </el-row>
                <el-row class="mt10">
                    <el-col :span="6"><span><span class="red">*</span>数据库驱动：</span></el-col>
                    <el-col :span="15">
                        <el-select placeholder="请选择" v-model="connectType" clearable>
                            <el-option v-for="(item,index) in connectTypeValues" :label="item.name" :value="item.typeId" :key="index"></el-option>
                        </el-select>
                    </el-col>
                </el-row>
                <el-row class="mt10">
                    <el-col :span="6"><span><span class="red">*</span>数据库IP地址：</span></el-col>
                    <el-col :span="15">
                        <el-input v-model="connectIp"></el-input>
                    </el-col>
                </el-row>
                <el-row class="mt10">
                    <el-col :span="6"><span><span class="red">*</span>数据库端口：</span></el-col>
                    <el-col :span="15">
                        <el-input type="number" v-model="port"></el-input>
                    </el-col>
                </el-row>
                <el-row class="mt10">
                    <el-col :span="6"><span><span class="red">*</span>数据库SID：</span></el-col>
                    <el-col :span="15">
                        <el-input v-model="serviceId"></el-input>
                    </el-col>
                </el-row>
                <el-row class="mt10">
                    <el-col :span="6"><span><span class="red">*</span>用户名：</span></el-col>
                    <el-col :span="15">
                        <el-input v-model="userName"></el-input>
                    </el-col>
                </el-row>
                <el-row class="mt10">
                    <el-col :span="6"><span><span class="red">*</span>密码：</span></el-col>
                    <el-col :span="15">
                        <el-input type="password" v-model="userPwd"></el-input>
                    </el-col>
                </el-row>
                <el-row class="mt10">
                    <el-col :span="6"><span><span class="red">*</span>数据屏蔽选项：</span></el-col>
                </el-row>
                <el-row class="mt10">
                    <el-col :span="6">
                        <el-radio v-model="filterType" label="2" class="radioOption">按用户帐号屏蔽数据，帐号关联数据监控字段：</el-radio>
                    </el-col>
                </el-row>
                <el-row class="mt10">
                    <el-col :span="6" :offset="3">
                        <el-select placeholder="请选择类型" v-model="filterAccountFieldType" clearable>
                            <el-option v-for="item in filterTypes" :label="item.label" :value="item.value" :key="item.value"></el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="10" :offset="1">
                        <el-input v-model="filterAccountFieldName"></el-input>
                    </el-col>
                </el-row>
                <el-row class="mt10">
                    <el-col :span="6">
                        <el-radio v-model="filterType" label="1" class="radioOption">按监控数据USER_ID屏蔽数据</el-radio>
                    </el-col>
                </el-row>
                <el-row class="mt10">
                    <el-col :span="6">
                        <el-radio v-model="filterType" label="0" class="radioOption">不屏蔽</el-radio>
                    </el-col>
                </el-row>
                <el-row class="mt10">
                    <el-col :span="12"><span>监控数据USER_ID与用户账号映射包：</span></el-col>
                </el-row>
                <el-row class="mt10">
                    <el-col :span="15" :offset="6">
                        <el-input v-model="userRelationPackage"></el-input>
                    </el-col>
                </el-row>
                <el-row class="mt10">
                    <el-col :span="12"><span>监控数据USER_ID与通讯帐号映射包：</span></el-col>
                </el-row>
                <el-row class="mt10">
                    <el-col :span="15" :offset="6">
                        <el-input v-model="userIdImParsePackage"></el-input>
                    </el-col>
                </el-row>
                <el-row class="mt10">
                    <el-col :span="12"><span>监控数据USER_ID与邮件地址映射包：</span></el-col>
                </el-row>
                <el-row class="mt10">
                    <el-col :span="15" :offset="6">
                        <el-input v-model="userIdEmailParsePackage"></el-input>
                    </el-col>
                </el-row>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="testLink" :loading="btnloading2">链接测试</el-button>
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="editDataLink" :loading="btnloading">保 存</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>
<script>
import { mapState } from 'vuex'
import utils from '../../utils/index.js'
export default {
    data() {
        return {
            exportUrl: utils.apiUrl + '/export/auth/connection?sessionId=' + localStorage.getItem('sessionId'),
            loading1:true,
            dialogVisible: false,
            currentPage:1,
            pageSize:5,
            rowId:"",
            selectRows:[],
            dialogTitle:"添加数据库链接",
            //新建所需参数
            connectName:"",
            connectType:"",
            connectIp:"",
            port:"",
            serviceId:"",
            userName:"",
            userPwd:"",
            userRelationPackage:"",
            userIdImParsePackage:"",
            userIdEmailParsePackage:"",
            filterAccountFieldName:"",
            filterType: "0",
            rowId: null,
            filterAccountFieldType:"",
            filterTypes: [{
                label:"用户帐号",
                value: 0
            },{
                label:"所属组织",
                value: 1
            }],
            //存在本地的每页条数
            threadNum: parseInt(localStorage.getItem('pagesize')),
            btnloading: false,
            btnloading2: false,
            deleteloading: false
        }
    },
    created() {
        if(localStorage.getItem('pageType') == 0) {
            this.$router.push({ path:'/user' });
        }
    },
    mounted() {
        this.getConnectType();
        this.getList();
        this.getOrgList();
    },
    computed: mapState({
        msg: state => state.system.msg,
        flag: state => state.system.flag,
        dataLink(state) {
            let arr = [];
            let listLength = state.system.dataLink.length;
            state.system.dataLink.map((item,index) => {
                item.index = index;
                if(index == listLength - 1) {
                    item.end = true;
                }
                arr.push(item)
            })
            return arr;
        },
        totleNum: state => state.system.totleNum,
        connectTypeValues: state => state.system.connectType,
        depValue: state => state.depart.depList,
        maincolor: state => state.system.colors,
    }),
    methods:{
        getList() {
            this.$store.dispatch('getLinkList',{
                pageNo: 1,
                pageSize: this.threadNum,
                sessionId: localStorage.getItem('sessionId'),
            }).then(() => {
                if(this.msg !== '成功') {
                    this.loading1 = false;
                    this.$message(this.msg)
                }else{
                    this.loading1 = false;
                }
            });
        },
        getConnectType() {
            this.$store.dispatch("getTypes",{
                sessionId: localStorage.getItem('sessionId')
            })
        },
        handleCurrentChange(val) {
            this.$store.dispatch('getLinkList',{
                pageNo: val,
                pageSize: this.threadNum,
                sessionId: localStorage.getItem('sessionId'),
            })
        },
        addNew() {
            this.rowId = null;
            this.connectName = "";
            this.connectType = "";
            this.connectIp = "";
            this.port = "";
            this.serviceId = "";
            this.userName = "";
            this.userPwd = "";
            this.userRelationPackage = "";
            this.userIdImParsePackage = "";
            this.userIdEmailParsePackage = "";
            this.filterType = "0";
            this.filterAccountFieldName = "";
            this.dialogVisible = true;
            this.filterAccountFieldType = "";
        },
        modifyRow(row) {
            this.dialogTitle = "修改数据库链接";
            this.rowId = row.rowId;
            this.dialogVisible = true;
            this.connectName = row.connectName;
            this.connectType = row.connectType;
            this.connectIp = row.connectIp;
            this.port = row.port;
            this.serviceId = row.serviceId;
            this.userName = row.userName;
            this.userPwd = row.userPwd;
            this.userRelationPackage = row.userRelationPackage;
            this.userIdImParsePackage = row.userIdImParsePackage;
            this.userIdEmailParsePackage = row.userIdEmailParsePackage;
            this.filterType = row.filterType.toString();
            this.filterAccountFieldName = row.filterAccountFieldName;
            this.filterAccountFieldType = row.filterAccountFieldType;
        },
        editDataLink() {
           if(this.connecName == "") {
               this.$message('请输入数据库链接名称');
           }else if(typeof(this.connectType) == "string") {
               this.$message('请选择数据库驱动');
           }else if(this.connectIp == "") {
               this.$message('请输入数据库IP地址');
           }else if(this.port == "") {
               this.$message("请输入数据库端口");
           }else if(this.serviceId == "") {
               this.$message("请输入数据库SID");
           }else if(this.userName == "") {
               this.$message("请输入用户名");
           }else if(this.userPwd == "") {
               this.$message("请输入密码");
           }else if(this.filterType == "2") {
               if(this.filterAccountFieldType == null || this.filterAccountFieldType === '') {
                   this.$message("请选择所属组织");
               }else if(this.filterAccountFieldName == null || this.filterAccountFieldName === "") {
                   this.$message("请输入帐号关联数据监控字段");
               }else{
                   this.createLink();
               }
           }else if(this.filterType == "1") {
               if(this.userRelationPackage == null || this.userRelationPackage === "") {
                   this.$message("请输入监控数据USER_ID与用户账号映射包");
               }else{
                   this.createLink();
               }
           }else{
               this.createLink();
           }
        },
        //创建链接action
        createLink() {
            this.btnloading = true;
            this.$store.dispatch('createDataLink',{
                connectIp: this.connectIp,
                connectName: this.connectName,
                connectType: this.connectType,
                port: this.port,
                serviceId: this.serviceId,
                userName: this.userName,
                userPwd: this.userPwd,
                filterType: this.filterType,
                filterAccountFieldName: this.filterAccountFieldName,
                userRelationPackage: this.userRelationPackage,
                userIdImParsePackage: this.userIdImParsePackage,
                userIdEmailParsePackage: this.userIdEmailParsePackage,
                rowId: this.rowId,
                filterAccountFieldType:this.filterAccountFieldType,
                sessionId: localStorage.getItem('sessionId'),
            }).then(() => {
                if(this.msg == "保存成功") {
                    this.$message(this.msg);
                    this.btnloading = false;
                    this.dialogVisible = false;
                    this.getList();
                }else{
                    this.$message(this.msg);
                }
            })
        },
        testLink() {
            if(this.connectIp == "") {
                this.$message("数据库IP地址不能为空");
            }else if(this.connectName == "") {
                this.$message("数据库链接名称不能为空");
            }else if(typeof(this.connectType) == "string") {
                this.$message("请选择数据库驱动");
            }else if(this.port == "") {
                this.$message("数据库端口不能为空");
            }else if(this.serviceId == "") {
                this.$message("数据库SID不能为空");
            }else if(this.userName == "") {
                this.$message("用户名不能为空");
            }else if(this.userPwd == "") {
                this.$message("密码不能为空");
            }else{
                this.btnloading2 = true;
                let params = {
                    connectIp: this.connectIp,
                    connectName: this.connectName,
                    connectType: this.connectType,
                    port: this.port,
                    serviceId: this.serviceId,
                    userName: this.userName,
                    userPwd: this.userPwd,
                    sessionId: localStorage.getItem('sessionId')
                }
                if(this.rowId.length > 0) {
                    params.rowId = this.rowId;
                }
                this.$store.dispatch('testLink',params).then(() => {
                    this.btnloading2 = false;
                    this.$message(this.msg);
                });
            }
        },
        handleSelectionChange(val) {
            this.selectRows = [].concat(val);
        },
        deleteRows() {
            var ids = [];
            this.selectRows.map((item) => {
                ids.push(item.rowId);
            });
            if(ids.length == 0) {
                this.$message('请选择要删除的行');
            }else{
                this.$confirm('确定删除？','提示',{
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteloading = true;
                    this.$store.dispatch('delDataLink',{
                        contentIds: ids,
                        sessionId: localStorage.getItem('sessionId')    
                    }).then(() => {
                        this.deleteloading = false;
                        this.$message(this.msg);
                        this.getList();
                    })
                }).catch((err) => {
                    console.log(err);
                })
            }
        },
        moveUp(row) {
            let upId = "";
            this.dataLink.map((item) => {
                if(item.index == row.index - 1) {
                    upId = item.rowId
                }
            });
            this.$store.dispatch('moveDataLink',{
                contentId: row.rowId,
                objId: upId,
                sessionId: localStorage.getItem('sessionId')
            }).then(() => {
                this.getList();
            })
        },
        moveDown(row) {
            let downId = "";
            this.dataLink.map((item) => {
                if(item.index == row.index + 1) {
                    downId = item.rowId
                }
            });
            this.$store.dispatch('moveDataLink',{
                contentId: row.rowId,
                objId: downId,
                sessionId: localStorage.getItem('sessionId')
            }).then(() => {
                this.getList();
            })
        },
        //获取组织列表
        getOrgList() {
            this.$store.dispatch('getDepAllList',{
                pageSize: -1,
                sessionId: localStorage.getItem('sessionId')
            })
        }
    }
}
</script>
<style>
.el-button+.el-button{
    margin-left:0;
}
input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }
    input[type="number"]{
        -moz-appearance: textfield;
    }
.el-dialog__body{
    padding: 0 20px 30px 20px
}
.mt10{
    margin-top: 10px;
}
.radioOption{
    display: block;
    margin: 10px 0 0 100px;
}
.mr15{
    margin-right: 15px;
}
</style>


